<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-padding">
    <div class="topbox">
        <div class="box-body pull-right">
            <div class="form-inline">
                <div class="input-group">
							<span class="input-group-addon">
								<i class="fa fa-barcode"></i>
							</span>
                    <input class="form-control" placeholder="扫码查询..." type="text"/>
                    <div class="input-group-btn">
                        <button class="btn btn-success" type="button"><i class="fa fa-search"></i> 查询</button>
                        <button class="btn btn-primary" type="button">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box box-widget no-shadow">
        <div class="box-body">
            <h3>按钮主题</h3>
            <p>按钮样式<code>.btn</code>
                默认按钮<code>.btn-default</code>
                常用按钮<code>.btn-primary</code>
                成功按钮<code>.btn-success</code>
                信息按钮<code>.btn-info</code>
                危险按钮<code>.btn-danger</code>
                警示按钮<code>.btn-warning</code>
                禁用按钮<code>disabled="true"</code>
            </p>
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-default" type="button">默认按钮</button>
                    <button class="btn btn-primary" type="button">常用按钮</button>
                    <button class="btn btn-success" type="button">成功按钮</button>
                    <button class="btn btn-info" type="button">信息按钮</button>
                    <button class="btn btn-danger" type="button">危险按钮</button>
                    <button class="btn btn-warning" type="button">警示按钮</button>
                    <button class="btn btn-default" disabled="true" type="button">禁用按钮</button>
                </div>
            </div>
            <h3>按钮尺寸</h3>
            <p> 超大按钮<code>.btn-lg</code>
                缩小按钮<code>.btn-sm</code>
                超小按钮<code>.btn-xs</code>
            </p>
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-default btn-lg" type="button">超大按钮</button>
                    <button class="btn btn-default" type="button">默认按钮</button>
                    <button class="btn btn-default btn-sm" type="button">缩小按钮</button>
                    <button class="btn btn-default btn-xs" type="button">超小按钮</button>
                </div>
            </div>
            <h3>自适应尺寸</h3>
            <p> 自适应按钮<code>.btn-block</code>
            </p>
            <Div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-default btn-block" type="button">自适应按钮</button>
                </div>
            </Div>
            <h3>圆角/尖角按钮</h3>
            <p> 默认圆角
                尖角按钮增加<code>.btn-flat</code>样式
            </p>
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-default" type="button">圆角按钮</button>
                    <button class="btn btn-default btn-flat" type="button">尖角按钮</button>
                </div>
            </div>
            <h3>图标按钮&混搭</h3>
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-default" type="button"><i class="fa fa-star"></i></button>
                    <button class="btn btn-primary" type="button"><i class="fa fa-edit"></i></button>
                    <button class="btn btn-danger" type="button"><i class="fa fa-remove"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-plus"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-chevron-left"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-chevron-right"></i></button>
                    <button class="btn btn-success" type="button"><i class="fa fa-play"></i> 播放</button>
                    <button class="btn btn-warning" type="button"><i class="fa fa-pause"></i> 暂停</button>
                    <button class="btn btn-danger" type="button"><i class="fa fa-stop"></i> 停止</button>
                </div>

            </div>
            <h3>横向按钮组</h3>
            <p> 按钮组 样式<code>.btn-group</code>
            </p>
            <div class="row">
                <div class="col-sm-12">
                    <div class="btn-group">
                        <button class="btn btn-default" type="button">增加</button>
                        <button class="btn btn-default" type="button">编辑</button>
                        <button class="btn btn-default" type="button">删除</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button>
                        <button class="btn btn-primary" type="button"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-primary" type="button"><i class="fa fa-remove"></i></button>
                    </div>

                    <div class="btn-group">
                        <button class="btn btn-default" type="button"><i class="fa fa-plus"></i> 增加</button>
                        <button class="btn btn-default" type="button"><i class="fa fa-edit"></i> 编辑</button>
                        <button class="btn btn-danger" type="button"><i class="fa fa-remove"></i> 删除</button>
                    </div>
                </div>
            </div>
            <h3>纵向按钮组</h3>
            <p> 按钮组样式<code>.btn-group-vertical</code>
            <div class="row">
                <div class="col-sm-12">
                    <div class="btn-group-vertical">
                        <button class="btn btn-default" type="button">增加</button>
                        <button class="btn btn-default" type="button">编辑</button>
                        <button class="btn btn-default" type="button">删除</button>
                    </div>
                    <div class="btn-group-vertical">
                        <button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button>
                        <button class="btn btn-primary" type="button"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-primary" type="button"><i class="fa fa-remove"></i></button>
                    </div>

                    <div class="btn-group-vertical">
                        <button class="btn btn-default" type="button"><i class="fa fa-plus"></i> 增加</button>
                        <button class="btn btn-default" type="button"><i class="fa fa-edit"></i> 编辑</button>
                        <button class="btn btn-danger" type="button"><i class="fa fa-remove"></i> 删除</button>
                    </div>
                </div>
            </div>
            <h3>下拉按钮组&混搭组</h3>
            <p>
                按钮组样式<code>.btn-group</code>,在其内部的button样式<code>.dropdown-toggle</code>,并增加<code>data-toggle="dropdown"</code>来调用脚本
            <div class="row">
                <div class="col-sm-12">
                    <div class="btn-group">
                        <button class="btn btn-default" type="button">新增</button>
                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">点击转换</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">编辑</a></li>
                            <li><a href="#">注意下面的分组线</a></li>
                            <li class="divider"></li>
                            <li><a href="#">删除</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-primary" type="button"><i class="fa fa-plus"></i> 新增</button>
                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">点击转换</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="fa fa-edit"></i> 编辑</a></li>
                            <li><a href="#">注意下面的分组线</a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-remove"></i> 删除</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <h3>其他背景色按钮</h3>
            <p> 样式为<code>.bg-*</code> 如maroon、purple、navy、orange、olive
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn bg-maroon" type="button">褐红色</button>
                    <button class="btn bg-purple" type="button">紫色</button>
                    <button class="btn bg-navy" type="button">海军蓝</button>
                    <button class="btn bg-orange" type="button">橙色</button>
                    <button class="btn bg-olive" type="button">橄榄绿</button>
                </div>
            </div>
            <h3>社交按钮</h3>
            <p> 样式为<code>.btn-social</code>&<code>.btn-social-icon</code>
            <div class="row">
                <div class="col-sm-6">
                    <a class="btn btn-block btn-social btn-bitbucket">
                        <i class="fa">1</i> Sign in with Bitbucket
                    </a>
                    <a class="btn btn-block btn-social btn-dropbox">
                        <i class="fa">2</i> Sign in with Dropbox
                    </a>
                    <a class="btn btn-block btn-social btn-facebook">
                        <i class="fa fa-facebook"></i> Sign in with Facebook
                    </a>
                    <a class="btn btn-block btn-social btn-flickr">
                        <i class="fa fa-flickr"></i> Sign in with Flickr
                    </a>
                    <a class="btn btn-block btn-social btn-foursquare">
                        <i class="fa fa-foursquare"></i> Sign in with Foursquare
                    </a>
                    <a class="btn btn-block btn-social btn-github">
                        <i class="fa fa-github"></i> Sign in with GitHub
                    </a>
                    <a class="btn btn-block btn-social btn-google">
                        <i class="fa fa-google-plus"></i> Sign in with Google
                    </a>
                    <a class="btn btn-block btn-social btn-instagram">
                        <i class="fa fa-instagram"></i> Sign in with Instagram
                    </a>
                    <a class="btn btn-block btn-social btn-linkedin">
                        <i class="fa fa-linkedin"></i> Sign in with LinkedIn
                    </a>
                    <a class="btn btn-block btn-social btn-tumblr">
                        <i class="fa fa-tumblr"></i> Sign in with Tumblr
                    </a>
                    <a class="btn btn-block btn-social btn-twitter">
                        <i class="fa fa-twitter"></i> Sign in with Twitter
                    </a>
                    <a class="btn btn-block btn-social btn-vk">
                        <i class="fa fa-vk"></i> Sign in with VK
                    </a>
                </div>
                <div class="col-sm-6">
                    <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
                    <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
                    <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
                    <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
                    <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
                    <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
                    <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a>
                    <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
                    <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
                    <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
                    <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
                    <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
</body>
</html>
